<div class="mask"></div>

<header class="shop-header">
    <button class="side-menu-toggle btn">菜单</button>
    <nav class="shop-nav">
        <ul class="shop-list">
            <li class="shop-list-item">
                <a
                    class="<%= path === '/' ? 'active' : '' %>"
                    href="/"
                >商店</a>
            </li>
            <li class="shop-list-item">
                <a
                    class="<%= path === '/product-list' ? 'active' : '' %>"
                    href="/product-list"
                >所有产品</a>
            </li>
            <li class="shop-list-item">
                <a
                    class="<%= path === '/cart' ? 'active' : '' %>"
                    href="/cart"
                >我的购物车</a>
            </li>
            <li class="shop-list-item">
                <a
                    class="<%= path === '/order' ? 'active' : '' %>"
                    href="/order"
                >我的订单</a>
            </li>
            <li class="shop-list-item">
                <a
                    class="<%= path === '/admin/add-product' ? 'active' : '' %>"
                    href="/admin/add-product"
                >添加产品</a>
            </li>
            <li class="shop-list-item">
                <a
                    class="<%= path === '/admin/product-list' ? 'active' : '' %>"
                    href="/admin/product-list"
                >管理产品</a>
            </li>
        </ul>
    </nav>
</header>

<nav class="mobile-nav">
    <ul class="mobile-nav-list">
        <li class="mobile-nav-item">
            <a
                class="<%= path === '/' ? 'active' : '' %>"
                href="/"
            >商店</a>
        </li>
        <li class="mobile-nav-item">
            <a
                class="<%= path === '/product-list' ? 'active' : '' %>"
                href="/product-list"
            >所有产品</a>
        </li>
        <li class="mobile-nav-item">
            <a
                class="<%= path === '/cart' ? 'active' : '' %>"
                href="/cart"
            >我的购物车</a>
        </li>
        <li class="mobile-nav-item">
            <a
                class="<%= path === '/order' ? 'active' : '' %>"
                href="/order"
            >我的订单</a>
        </li>
        <li class="mobile-nav-item">
            <a
                class="<%= path === '/admin/add-product' ? 'active' : '' %>"
                href="/admin/add-product"
            >添加产品</a>
        </li>
        <li class="mobile-nav-item">
            <a
                class="<%= path === '/admin/product-list' ? 'active' : '' %>"
                href="/admin/product-list"
            >管理产品</a>
        </li>
    </ul>
</nav>